<template>
  <q-page class="q-pa-md" v-loading="loading">
    <div>
      <el-icon style="cursor: pointer;" @click="router.go(-1)">
        <ArrowLeft />
      </el-icon>
      <q-breadcrumbs-el label="显示单个评估数据的图表" />
    </div>
    <chart-line v-if="!loading" :chartOption="chartOption" :chartSize="chastSize"></chart-line>
  </q-page>
</template>
<script lang="ts" setup>
import chartLine from 'src/components/chartLine.vue';
const loading = ref(false);
import {getMetricHistory} from 'src/api/model'
import {ref,reactive} from "vue";
import {useRouter} from "vue-router"; //echart图例组件
const router = useRouter()
import { modelStore } from 'src/stores/model';
const showModelStore = modelStore()
const chastSize = reactive({
  width: '50%',
  height: "300px"
})
let chartOption = ref({
  xAxis: {
    type: 'category',
    data: [1]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [1],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
})
let dataformat = (value:number) => {
  let time = new Date(value);
  return  time.getFullYear()+"年"+":"+(time.getMonth()+1)+"月"+":"+time.getDate()+"日"+":"+time.getHours()+"点"+":"+time.getMinutes()+1+"分"+":"+ time.getSeconds()+"秒";
}
getMetric()
function getMetric(){
  const projectId = router.currentRoute.value.params.project_id
  const repository_model_id = showModelStore.repository_model_id
  const version_ids = showModelStore.version_id;
  const params = {
    metric_key: showModelStore.metric_key
  }
  // loading.value = true;
  // getMetricHistory(projectId,repository_model_id,version_ids,params).then( (res:any) => {
  //   if( res.data.length > 1 ){
  //     res.data.forEach( (items:any,index:any) => {
  //       let {value,timestamp}:{value:any,timestamp:number} = items;
  //       let time:any = dataformat(timestamp);
  //       chartOption.value.xAxis.data[index] = time;
  //       chartOption.value.series[0].data[index] = value
  //     })
  //     chartOption.value.series[0].type='line'
  //     loading.value = false;
  //   }else if( res.data.length === 1 ){
  //     let { value,timestamp }:{value:any,timestamp:any} = res.data[0];
  //     let time:any = dataformat(timestamp);
  //     chartOption.value.xAxis.data[0] = time;
  //     chartOption.value.series[0].data[0]= value
  //     chartOption.value.series[0].type='bar'
  //     loading.value = false;
  //   }
  // })
}
</script>
<style lang="scss" scoped></style>
